<template>
  <div class="box">
    <div class="add">
      <a-button type="primary" @click="visible = true" block>添加</a-button>
      <br />
      <br />
      <a-button type="dashed"  block @click="QQauth"
        >如果不是小雅qq绑定账户主点击这里qq授权</a-button
      >
    </div>
      <br />
    
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      @change="handleTableChange"
      rowKey="id"
      bordered
    >
      <template
        v-for="col in [
          'url',
          'account_id',
          'user_action_set_id',
          'accoss_token',
          'remake',
        ]"
        #[col]="{ text, record }"
        :key="col"
      >
        <div>
          <template v-if="editableData[record.id] && col == 'url'">
            <a-input
              v-if="editableData[record.id]"
              style="margin: -5px 0"
              v-model:value="editableData[editIndex[record.id]].url"
            />
          </template>
          <template v-else-if="editableData[record.id] && col == 'account_id'">
            <a-input
              v-if="editableData[record.id]"
              style="margin: -5px 0"
              v-model:value="editableData[editIndex[record.id]].account_id"
            />
          </template>
          <template
            v-else-if="editableData[record.id] && col == 'user_action_set_id'"
          >
            <a-input
              v-if="editableData[record.id]"
              style="margin: -5px 0"
              v-model:value="
                editableData[editIndex[record.id]].user_action_set_id
              "
            />
          </template>
          <template
            v-else-if="editableData[record.id] && col == 'accoss_token'"
          >
            <a-input
              v-if="editableData[record.id]"
              style="margin: -5px 0"
              v-model:value="editableData[editIndex[record.id]].accoss_token"
            />
          </template>

          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>

      <template #lastTime="{ record }"> {{ record.lastTime }} </template>
      <template #operation="{ record }">
        <div class="editable-row-operations">
          <span v-if="editableData[record.id]">
            <a @click="save(record.id)">Save</a>
            <!-- 气泡 -->

            <a-divider type="vertical" />
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.id)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a @click="edit(record.id)">Edit</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="Sure to delete?"
              @confirm="deleteDmp(record.id)"
            >
              <a>delete</a>
            </a-popconfirm>
          </span>
        </div>
      </template>
    </a-table>
    <a-modal v-model:visible="visible" title="添加" @ok="handleOk">
      <template v-for="(item, index) in fromAdd" :key="item.label">
        <form-is
          ref="formIs"
          :valueArray="item"
          @test="(arg) => addSubmit(arg, index)"
        />
      </template>
    </a-modal>
  </div>
</template>
<script lang="ts">
import {
  _DMPSum,
  _DMPadd,
  _DMPSelect,
  _DMPUpdate,
  _DMPdelete,
} from "@/api/dmp/index";
import { cloneDeep, forEach } from "lodash";
import formIs from "@/components/formIs.vue";
import { componentFrom, DMPDataItemAdd, painationFrom } from "@/type";
// import store from "@/store";
import { computed, defineComponent, reactive, ref, UnwrapRef } from "vue";
import { message } from "ant-design-vue/es";

const columns = [
  {
    title: "url",
    dataIndex: "url",
    width: "10%",
    slots: { customRender: "url" },
  },
  {
    title: "account_id",
    dataIndex: "account_id",
    width: "10%",
    slots: { customRender: "account_id" },
  },
  {
    title: "accoss_token",
    dataIndex: "accoss_token",
    width: "30%",
    slots: { customRender: "accoss_token" },
  },
  {
    title: "user_action_set_id",
    dataIndex: "user_action_set_id",
    idth: "10%",
    slots: { customRender: "user_action_set_id" },
  },
  {
    title: "备注",
    dataIndex: "remake",
    // width: "40%",
    slots: { customRender: "address" },
  },
  // {
  //   title: "状态",
  //   dataIndex: "work_status",
  //   // width: "40%",
  //   slots: { customRender: "address" },
  // },
  {
    title: "最后修改时间",
    dataIndex: "last_time",
    // width: "40%",
    // slots: { customRender: "lastTime" },
  },
  {
    title: "operation",
    dataIndex: "operation",
    slots: { customRender: "operation" },
  },
];
// interface DataItem {
//   key: string;
//   name: string;
//   age: number;
//   address: string;
//   lastTime?: string;
// }

// 模拟请求
const data: DMPDataItemAdd[] = [];
// const formdata: DMPDataItem = {
//   key: "",
//   name: "",
//   age: 0,
//   address: "",
//   lastTime: "",
// };
// 模拟请求
// 添加框
const fromAddType: componentFrom[] = [
  {
    label: "url",
    value: "",
    type: "require",
    status: false,
  },
  {
    label: "account_id",
    value: "",
    type: "require",
    status: false,
  },
  {
    label: "accoss_token",
    value: "",
    type: "require",
    status: false,
  },
  {
    label: "user_action_set_id",
    value: "",
    type: "require",
    status: false,
  },
  {
    label: "remake",
    value: "",
    type: "require",
    status: false,
  },
];
interface editIndexInter {
  [index: number]: number;
}

export default defineComponent({
  components: {
    formIs,
  },
  setup() {
    //组件
    const formIs = ref();
    const editIndex = ref<editIndexInter>({});
    const fromAdd = fromAddType;
    const dataSource = ref(data);
    //dialog的浮窗
    const visible = ref<boolean>(false);
    const value = ref<string>("false");
    // const editableData = reactive<DMPDataItemAdd[]>([]);
    const editableData: UnwrapRef<DMPDataItemAdd[]> = reactive([]);
    let current = ref<number>(1);
    let pageSize = ref<number>(5);
    let total = ref<number>(0);
    const edit = (id: number) => {
      let tmp = cloneDeep(dataSource.value.filter((item) => id === item.id));
      editableData[id] = tmp[0];
      editIndex.value[id] = id;
    };
    const save = (key: number) => {
      let tmp = editableData[key];
      console.log(tmp);
      _DMPUpdate(tmp).then((res:any) => {
        current.value = 1;
        cancel(key);
      });
    };
    const cancel = (key: number) => {
      delete editableData[key];
      delete editIndex.value[key];
      paginationAPi();
      //刷新当前页面
    };
    const deleteDmp = (key: number) => {
      _DMPdelete({ id: key }).then((res:any) => {
        cancel(key);
      });
    };
    const handleOk = () => {
      let tmp = true;
      let object: any = {};
      fromAdd.map((item) => {
        object[item.label] = item.value;
        if (item.status == false) {
          message.info("<" + item.label + ">选项没填");
          tmp = false;
          return;
        }
      });
      if (!tmp) return;
      object["work_status"] = false;
      // formIs.value.ErrorString();
      _DMPadd(object)
        .then((res:any) => {
          visible.value = false;
          current.value = 1;
          paginationAPi();
          // 清空
          fromAdd.map((item: any) => {
            item.value = "";
            item.status = false;
          });
        })
        .catch((e:any) => {
          console.log(e);
        });
    };
    const addSubmit = (e: boolean, index: number) => {
      fromAdd[index].status = e;
      console.log(fromAdd[index]);
    };

    const pagination = computed(() => ({
      total: total.value,
      current: current.value,
      pageSize: pageSize.value,
    }));
    const handleTableChange = (page: any, filters: never, sorter: never) => {
      // aas sadas/aa
      current.value = Number(page.current);
      paginationAPi();
    };

    const paginationAPi = () => {
      _DMPSum().then((res:any) => {
        console.log(res);
        console.log(Number(res.data.value) + "查询");
        total.value = Number(res.data.value);
      });
      _DMPSelect(pagination.value).then((res:any) => {
        dataSource.value = res.data.value;
      });
    };
    const QQauth = () => {
      window.open(
        "https://developers.e.qq.com/oauth/authorize?client_id=1111916351&redirect_uri=http://code.huaxk.top"
      );
    };
    // 初始化
    _DMPSum()
      .then((res:any) => {
        console.log(res);
        total.value = Number(res.data.value);
        if (total.value != 0) {
          paginationAPi();
        }
      })
      .catch((e:any) => {
        console.log("ERROR:" + e);
      });
    // 初始化
    return {
      editIndex,
      current,
      pageSize,
      fromAdd,
      value,
      dataSource,
      columns,
      editingKey: "",
      editableData,
      visible,
      pagination,
      total,
      handleOk,
      edit,
      save,
      addSubmit,
      cancel,
      handleTableChange,
      QQauth,
      deleteDmp,
    };
  },
});
</script>

<style lang="scss" scoped>
.box {
  padding: 0 20px 0 20px;
}
.add {
  text-align: right;
}
.formItem {
  .formlabel {
    padding: 5px;
  }
  padding: 5px 0 5px 0;
}
</style>
